<template>
   <div class="j-cell">
     <div class="j-cell__title">
       {{title}}
     </div>
     <div class="j-cell__value" v-if="value">
       {{value}}
     </div>
     <div class="j-cell__value" v-if="isSlot">
       <slot/>
     </div>
     <i class="icon-arrow" v-if="!isSlot"></i>
   </div>
</template>
<script>
export default {
  name: 'JCell',
  data() {
    return {
    };
  },
  props: {
    title: {
      type: String
    },
    isSlot: {
      type: Boolean,
      default: false
    },
    isIcon: {
      type: String
    },
    value: {
      type: String
    }
  },
  mounted() {
  },
  methods: {
  }
};
</script>
<style lang="scss" scoped>
.j-cell{
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 30px;
  overflow: hidden;
  font-size: 30px;
  line-height: 48px;
  background-color: #fff;
  .j-cell__title, .j-cell__value{
    flex: 1;
  }
  .j-cell__title{
    color: #111;
    font-size: 30px;
  }
  .j-cell__value {
    position: relative;
    // overflow: hidden;
    font-size: 24px;
    color: #BBB;
    text-align: right;
    vertical-align: middle;
    word-wrap: break-word;
  }
  .icon-arrow{
    margin-top:14px;
    margin-left: 40px;
    height: 20px;
    width: 10px;
    display: inline-block;
    background-image: url('../assets/images/icon-arrow-right-grey.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.j-cell:not(:last-child)::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #ECE8E8;
    height: 1px; /*no*/
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
</style>
